<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="showDialog"
      :title="dialogTitle"
      class="dialog-component"
      :visible.sync="showDialog"
      width="500px"
      @close="closeDialog(0)"
    >
      <el-form ref="formInfo" :rules="rules" :model="formInfo" class="demo-form-inline" label-width="100px">
        <el-form-item label="资产名称：" prop="assetName" required>
          <el-input v-model="formInfo.assetName"></el-input>
        </el-form-item>
        <el-form-item label="资产分类：" prop="assetClassifyId" required>
          <el-select v-model="formInfo.assetClassifyId" placeholder="请选择分类">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.classifyType"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资产数量：" prop="assetCount" required>
          <el-input type="number" v-model.number="formInfo.assetCount" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
          <el-button @click="closeDialog(0)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>
 
<script>
export default {
  name: "DialogComponent",
  props: {
    dialogTitle: {
      type: String,
      default: "添加人员"
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      rules:{
           assetName: [
            { required: true, message: '请输入资产名称', trigger: 'change' }
          ],
          assetClassifyId: [
            { required: true, message: '请选择资产分类', trigger: 'change' }
          ],
          assetCount: [
            { required: true, message: '请输入资产数量', trigger: 'change' }
          ],
      },
      options:[],
      showDialog: false,
      formInfo: JSON.parse(JSON.stringify(this.itemInfo))
    };
  },
  mounted() {
    this.getOpt();
  },
  methods: {
    //   获取下拉框
    getOpt() {
      this.getRequest("/asset/getTypeList", {}).then(res => {
        this.options=res.obj
      });
    },
    // 保存操作
    submitForm(formName) {
      const that = this;
    //   const params = Object.assign(that.formInfo, {});
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postRequest("/asset/setAsset", that.formInfo).then(res => {
                that.$message({
                    message: "操作成功！",
                    type: "success"
                });
                that.closeDialog(1);
          });
          // 走保存请求
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.showDialog = false;
      this.$emit("closeDialog", flag);
    }
  }
};
</script>
 
<style>

</style>
